<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta name="title" th:content="'下载中心_'+${title}" />
		<meta name="description" th:content="${description}" />
		<meta name="keywords" th:content="${keywords}" />
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>下载中心</title>
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/swiper.min.css">
		<link rel="stylesheet" href="css/index.css">
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js"></script>
		<style>
			.allTit {
				text-align: center;
				font-weight: bold;
				color: #498CD1 !important;
				font-size: 24px;
				margin-bottom: 20px;
			}
			
			.allTit i {
				letter-spacing: 2px;
				font-style: normal;
			}
			.down-list {
				height: 68px;
				line-height: 68px;
				background: #fcfafb;
				color: #959394;
				padding: 0 120px 0 72px;
				position: relative;
				margin-bottom: 20px;
			}
			.down-list a{
				position: absolute;
				right: 10px;
				top: 15px;
			}
			.down-p{
				display: none;
			}
			
			.down-num {
				width: 62px;
				height: 68px;
				line-height: 68px;
				background: #f4f2f3;
				color: #333333;
				text-align: center;
				margin-right: 10px;
				display: inline-block;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.down-mage {
				display: inline-block;
			}
			
			.down-btn {
				padding: 5px 10px;
				line-height: 30px;
				background: #2573c6;
				text-align: center;
				font-size: 14px;
				color: #FFFFFF;
				border-radius: 5px;
				display: flex;
				align-items: center;
			}
			
			.down-btn img {
				display: inline-block;
				margin-left: 5px;
				width: 20px;
			}

			@media screen and (max-width: 768px) {
				.down-list {
					padding: 0 40px 0 45px;
					height: 40px;
					line-height: 40px;
				}
				.down-num{
					width: 40px;
				    height: 40px;
					line-height: 40px;
				}
				.down-btn{
					display: none;
				}
				.down-list a{
					top: 0;
				}
				.down-p {
				    width: 28px !important;
				    display: block;
				    position: absolute;
				    top: 6px;
				    right: 0;
				}
			}
		</style>
	</head>
	<body>
		<div id="root">
			<div>
				<div class="cOYSvF">
					<div class="header-page"></div>
					<div class="swiper-shop swiper-container">
						<div class="swiper-wrapper">
							<div th:each="banner :${banners}" class="swiper-slide"
								 th:style="'background: url(' + ${banner.images} + ');'"
							></div>
						</div>
						<div class="swiper-pagination"></div>
					</div>
					<div class="eZHbVe" style="margin-top: 30px;">
						<h3 class="allTit"><a style="color:#999999;">—</a>&nbsp;&nbsp;&nbsp;<i style="color: #333333;">下载中心</i>&nbsp;&nbsp;&nbsp;<a
							 style="color:#999999;">—</a></h3>
						<div class="down-box">
							<div class="down-list" th:each="index,file :${files}">
								<div class="down-num" th:text="${index}">1</div>
								下载列表
								<a href="">
									<img class="down-p" src="img/down-p.png">
									<span class="down-btn">
										<a th:href="${file.images}">立即下载</a>
										<img src="img/down.png">
									</span>	
								</a>
							</div>
						</div>
					</div>

				</div>
			</div>
			<div class="footer-page"></div>
			<div class="login-cli"></div>
		</div>
		<script>
			$(function() {
				$(".header-page").load("http://122.14.195.113:8089/header.html");
				$(".footer-page").load("http://122.14.195.113:8089/footer.html");
				$(".login-cli").load("http://122.14.195.113:8089/login-cli.html");
			});
			var swiper = new Swiper('.swiper-shop', {
				spaceBetween: 0,
				loop: true,
				autoplay: {
					delay: 3000,
					disableOnInteraction: false,
				},
				pagination: {
					el: '.swiper-pagination',
					clickable: true,
				},
				observer: true,
				observeParents: true,
				watchOverflow: true
			});
		</script>
	</body>
</html>
